<script setup>
const post = ref(null);
const id = useRoute().params.id;
const loadingStore = useLoadingStore();
try {
  loadingStore.show();
  const { data  }  = await useApiFetch(`/newapi/article_v1/${id}`);
  console.log(`output->data`,data.value)
  
  const { data: rendered } = await useFetch('/newapi/article_v1/parseMarkdown', {
  method: 'POST',
  body: { md: data.value?.content }
})
post.value = rendered.value
} finally {
  loadingStore.hide();
}
// const { data: post } = await useAsyncData(`article-${id}`, async () => {
//   try {
//    const result =  await queryCollection('blog').path(`/blog/article-${id}`).first();
//     if (!result) {
//       console.warn(`未找到文章: article-${id}`);
//       return null;
//     }
    
//     return result;
//   } catch (error) {
//     console.error("数据获取失败:", error);
//     return null;
//   }
// });
// 确保 SEO 元数据在数据加载后设置
watchEffect(() => {
  if (post.value) {
    useSeoMeta({
      title: post.value.title || "默认文章标题",
      description: post.value.description || "默认文章描述",
    });
  }
});

// 如果文章不存在，设置默认 SEO
if (!post.value) {
  useSeoMeta({
    title: "文章未找到",
    description: "抱歉，您访问的文章不存在",
  });
}
</script>
<template>
  <div class="min-h-screen">
    <div class="max-w-4xl mb-[30px] mx-auto px-[10px]">
      <article >
        <NuxtLink
          to="/article"
          class="sticky w-full top-0 z-20 inline-flex px-1 rounded cursor-pointer items-center text-muted text-bsr hover:text-bsy/80 bg-bsr/20 backdrop-blur"
        >
          <div class="w-full text-center text-lg font-black"> 返回 </div>
        </NuxtLink>
        <div v-if="post" class="prose prose-pre:bg-[#f6f8fa] prose-code:text-[#000] max-w-none ">
          <!-- <ContentRenderer :value="post.html" /> -->
          <div v-html="post.html" ></div>
        </div>
        <div v-else class="text-center py-20">
          <h2 class="text-2xl font-bold text-red-500 mb-4">文章未找到</h2>
          <p class="text-gray-400">抱歉，您访问的文章不存在或已被删除。</p>
        </div>
      </article>
    </div>
  </div>
</template>

<style scoped>
</style>
